<script setup lang="ts">
import { reactive } from 'vue';
import New from './components/New.vue';

const st = reactive<{
  name:string,
  age:number
}>({
  name:"Voldy",
  age:20
})
function addAge (valve:number,v2:string){
  console.log(valve,v2)
  return st.age++
}
</script>

<template>
  <div>
    用户：{{ st.name }}
    年纪：{{ st.age }}
  </div>
  <button type="button" @click="st.name = 'Lord'">Click</button>
  <New :age="st.age" @add="addAge">
    <!-- o是子传过来数据 -->
    <!-- <template #default="o">
      <h1>这个人叫{{ o.item.name }}</h1>
      <div>这人的年纪是{{ o.item.age }}</div>
    </template> -->
    <!-- 解构的方法 -->
    <template #default="{item}">
      <h1>这个人叫{{ item.name }}</h1>
      <h2>这人的年纪是{{ item.age }}</h2>
    </template>
    <template #footer>
      <div>这是脚步</div>
    </template>
  </New>
</template>